<template>
  
    <div>
    <basic-container>
      <!-- START goBack -->
      <div class="el-page-header haruyuki-mb-20">
        <div
          class="haruyuki-page-header-left haruyuki-size-18"
          @click="goBack"
        >
          <i class="el-icon-arrow-left"></i>
          <div class="haruyuki-size-24">返回</div>
        </div>
      
      </div>
      <!-- END goBack -->
    
      <div class="el-page-header__content"  style="; text-align: center; font-size: 30px;" >商品发货</div>
      <section class="haruyuki-bg-color-white">
        <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-content"  >
 
          <el-row :gutter="20" style="  font-size: 18px;">
            <el-col :span="24" >
              <span>订单编号：{{ basicData.shopOrderNo }}</span>
            </el-col>
            <el-col :span="8">
              <span>产品分类：{{ basicData.shopClassName }}</span>
            </el-col>
            <el-col :span="8">
              <span>产品类型：{{ basicData.shopTypeName }}</span>
            </el-col>
            <el-col :span="8">
              <span>产品型号：{{ basicData.shopModelName }}</span>
            </el-col>
            <el-col :span="24">
              <span>订单数量：{{ basicData.shopOrderNumber }}</span>
            </el-col>
            <el-col :span="8">
                <span>收货人：{{ basicData.shopConsignee }}</span>
            </el-col>
             <el-col :span="8">
              <span>收货人联系方式：{{ basicData.shopConsigneePhone }}</span>
            </el-col>

            <el-col :span="8">
              <span >配送方式：{{ basicData.shopDeliveryMethod == '1' ? '上门自提': '物流快递' }}  </span>
            </el-col>

            <el-col :span="24">
              <span>收货地址：{{ basicData.shopConsigneeAddress }}</span>
            </el-col>



          </el-row>
        </div>
        
        </div>
        <div style=" text-align: center;  ">
        <el-form ref="ruleForm" label-width="100px"  style="display: inline-block;width: 1000px;  " >
            <el-form-item label="物流公司："
    
            :rules="[
            { required: true, message: '物流公司不能为空'},
            ]"
            >
            <el-input v-model="basicData.shopLogisticsCompany"></el-input>
            </el-form-item>
                <el-form-item label="物流单号："  
                :rules="[
                { required: true, message: '物流单号不能为空'},
                ]"
                >
                    <el-input v-model="basicData.shopLogisticsNo"></el-input>
                </el-form-item>

                <el-form-item label="备注："
      
                >
                    <el-input   type="textarea"
                    :rows="5"
                    v-model="basicData.shopRemarks" ></el-input>
                </el-form-item>
            </el-form>

      </div>
      <div style=" text-align: center;  ">
        <el-button  
          style=" text-align: center; width: 180px; height: 50px; font-size: 18px;"
          type="primary"
          size="primary"
          
          @click="handleShipments()"
          >确认发货</el-button>
        </div>

      </section>
     

        

    </basic-container>
    </div>
      
  </template>
  
  <script>
  import { getDetailById ,orderShipments} from "@/api/rb-oem/shopOrder/shop_order";
  
  import { mapGetters } from "vuex";
  import basicForm from "@/components/rb-service/basic-form";
  
  
  
  export default {
    components: {
      basicForm,
    },
    data() {
      return {
        labelData: {
          basicTitle: "商品发货",
        },
        shopOrderId: this.$route.query.id,
        dialogVisible: false,
        passVisible: false,
        dialogText: "",
        active: 0,
        policyVisible: false,
        service: {},
        basicData: {
          shopOrderNo: "",
          shopSerialNo: "",
          shopClassName: "",
          shopTypeName: "",
          shopModelName: "",
          shopOrderNumber: "",
          shopPriceTotal: "",
          shopDeliveryMethod: "",
          serviceNo: "",
          serviceName: "",
          shopConsignee: "",
          shopConsigneePhone: "",
          shopConsigneeAddress: "",
          shopLogisticsNo: "",
          shopLogisticsCompany: "",
          shopOrderStatus: "",
          shopRemarks: "",
        },
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.shop_order_add, false),
          viewBtn: this.vaildData(this.permission.shop_order_view, false),
          delBtn: this.vaildData(this.permission.shop_order_delete, false),
          editBtn: this.vaildData(this.permission.shop_order_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach((ele) => {
          ids.push(ele.id);
        });
        return ids.join(",");
      },
      exhibition() {
        return (val) => {
          if (val == "" || val == "-1") {
            return (val = 0);
          } else {
            return val;
          }
        };
      },
      getYearMonth(){
        return (date) => {
          let result = (date + '').split(' ');
          return result[0];
        }
      }
    },
    created() {
      this.doGetDicts();
      this.infoData(this.shopOrderId);
    },
    methods: {
      /* 返回页面 */
      goBack() {
        this.$router.$avueRouter.closeTag();
        this.$router.back();
      },
   
    
  
      /* 字典 */
      doGetDicts() {

      },
      /* 页面加载 初始化请求详情接口 */
      infoData(id) {
        getDetailById(id).then((res) => {
  
          this.basicData = res.data.data;

        });
      },
      /* 发货提交处理 */
      handleShipments() {
        
          this.$confirm("确认发货?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
         }).then(() => {
            
            orderShipments(this.basicData).then((res) => {
            if (res.status == "200") {
                  // this.infoData(this.shopOrderId);
                  // this.goBack().then()

                  this.$root.Bus.$emit('orderDetail'); //传播方法
                  this.goBack()
                  
                  this.$message({
                    type: "success",
                    message: "操作成功!",
                  });} else {
                  this.$message({
                    type: "error",
                    message: res.data.message,
                  });
                }
              }
            );  
        });   
  
      },
    
    },
  };
  </script>
  
  <style lang="scss" scoped>
  /deep/.el-transfer-panel__list.is-filterable {
    width: 400px !important;
    height: 500px !important;
  }
  
  /deep/.el-transfer-panel {
    width: 400px !important;
    height: 500px !important;
  }

  .picture-preview {
    color: #409eff;
    cursor: pointer;
  }
  
  .haruyuki-image-preview {
    width: 260px;
  }
  .image-preview-title{
    // text-align: center;
    margin-bottom: 10px;
  }
  .haruyuki-image-preview .haruyuki-image .el-image{
    border-radius:10px;
  }
  
  /deep/ .el-image__error{
    background: #fff;
  }
  .infoWrap_line{
    display: flex;
    align-items: center;
    padding-bottom: 30px;
    .info_line_span{
      width: 160px;
      text-align: right;
    }
  }
  .nullData{
    text-align: center;
    font-size: 24px;
    font-weight: bold;
  }
  .w100{
    width: calc(100% - 160px);
  }
  .btnCode{
    width: 100px;
    border-radius: 0;
    padding:0;
    margin: 10px 0;
    background: #409eff !important;
  }
  .btnCode:hover{
    padding:0;
    border:none;
    background: #409eff !important;
  }
  /deep/ .el-input-group__append{
    background: #409eff !important;
    color: #fff !important;
    padding:0;
  }
  </style>